<template>
  <div class="image__placeholder">
    <div class="content-banner-title">
      <div class="Title">
        <p>友情链接</p>
      </div>
    </div>
    <div class="link">
      <Link1></Link1>
      <Link2></Link2>
      <Link3></Link3>
      <Link4></Link4>
    </div>
    <div class="block">
      <a href="http://sso.sdwcvc.cn/" target="_blank" rel="noopener noreferrer">
        <el-image lazy :src="url1"> </el-image>
      </a>
      <a
        href="http://hyqd.sdwcvc.cn/SdwcvcPortalTemp/html/index.html"
        target="_blank"
        rel="noopener noreferrer"
        ><el-image lazy :src="url2"></el-image>
      </a>
      <a
        href="http://www.sdsl.xdjxpt.com/default.aspx"
        target="_blank"
        rel="noopener noreferrer"
        ><el-image lazy :src="url3"></el-image
      ></a>
      <a
        href="http://dgsx.sdwcvc.edu.cn:8888/"
        target="_blank"
        rel="noopener noreferrer"
        ><el-image lazy :src="url4"></el-image
      ></a>
    </div>
  </div>
</template>

<script>
import Link1 from "@/components/Content/ContentLink/Link1.vue";
import Link2 from "@/components/Content/ContentLink/Link2.vue";
import Link3 from "@/components/Content/ContentLink/Link3.vue";
import Link4 from "@/components/Content/ContentLink/Link4.vue";
export default {
  name: "ContentLink",
  components: { Link1, Link2, Link3, Link4 },
  data() {
    return {
      url1: require("@/assets/content-link/link4.jpg"),
      url2: require("@/assets/content-link/link3.jpg"),
      url3: require("@/assets/content-link/link1.jpg"),
      url4: require("@/assets/content-link/link2.jpg"),
    };
  },
};
</script>
<style>
/* 友情链接 */
.image__placeholder {
  padding-bottom: 0.8rem;
  margin-bottom: 0.32rem;
  background: white;
}
/* 图片 */
.el-image {
  width: 48%;
  padding: 0.12rem;
}
/* 选择框 */
.el-select {
  width: 48%;
  padding: 0.12rem;
}
/* 四个选择框 */
.link {
  margin-bottom: 0.8rem;
}
/* 下拉菜单单行 */
.el-select-dropdown__item {
  font-size: 0.48rem !important;
  line-height: 0.48rem !important;
  font-weight: 500 !important;
  height: 1rem !important;
}
/* 下拉菜单 */
.el-select-dropdown__wrap {
  max-height: 10.96rem !important;
}
/* 选择框 */
.image__placeholder .link .el-select .el-input .el-input__inner {
  font-size: 0.48rem !important;
  line-height: 0.72rem !important;
  color: #999;
  height: 1.32rem !important;
}
/* 选择框箭头图标 */
.el-select .el-input .el-select__caret {
  font-size: 0.72rem !important;
}
</style>
